import React, { PureComponent } from 'react';
import { connect } from 'react-redux/es/exports';
import {
    TopicWrapper,
    TopicItem,
    } from '../style'

 class Topic extends PureComponent {
    render() {
        const{ topicList } = this.props;
        return (
            <TopicWrapper>
                {
                topicList.map((item) => (
                    <TopicItem key={item.get('id')}>
                        <img 
                        className='topic-pic'
                        src={item.get('imgUrl')}
                        alt=''
                        />
                        {item.get('title')}
                    </TopicItem>
                ))
            }
            </TopicWrapper>
        )
    }
}

const mapState = (state) => ({
    topicList: state.getIn(['home','topicList']),
})

export default connect(mapState, null)(Topic);